.kira-image {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
	z-index: 20;

	&-modal {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		flex-direction: column;
		transition: all 0.2s ease;
		backdrop-filter: blur(0px);

		* {
			transition: all 0.2s ease;
		}

		.kira-image-header {
			width: 100%;
			height: 64px;
			background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
			display: flex;
			align-items: center;
			color: white;
			z-index: 21;

			.kira-image-counter {
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 10px;
				font-size: 18px;
				font-variant-numeric: tabular-nums;
			}

			.kira-image-operation {
				margin: 0 20px 0 auto;
				height: 100%;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;

				&-button {
					width: 32px;
					height: 32px;
					font-size: 16px;
					cursor: pointer;
					display: flex;
					justify-content: center;
					align-items: center;

					&:hover {
						background-color: rgba(143, 141, 144, 0.45);
					}
				}
			}
		}

		.kira-image-container {
			width: 100%;
			height: calc(100% - 64px);
			display: flex;
			pointer-events: none;

			div[class^='kira-image-'][class$='-button-panel'] {
				width: 86px;
				display: flex;
				justify-content: center;
				align-items: center;
				z-index: 21;

				.kira-image-exchange-button {
					width: 56px;
					height: 56px;
					border-radius: 50%;
					color: white;
					pointer-events: auto;
					display: flex;
					justify-content: center;
					align-items: center;

					i {
						font-size: 24px;
						text-shadow: 0 0 3px #000;
					}
				}
			}

			.kira-image-list {
				flex-grow: 1;
				display: flex;
				position: relative;
				animation-duration: 0.2s;
				animation-fill-mode: forwards;

				div {
					position: absolute;
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;

					img {
						max-width: calc(100% - 12px);
						max-height: calc(100% - 24px);
						user-select: none;
					}
				}

				.kira-image-prev {
					transform: translateX(-100vw);
				}

				.kira-image-next {
					transform: translateX(100vw);
				}

				[class^='kira-image-'] > img {
					cursor: zoom-in;
					-webkit-user-drag: none;
					transition: scale 0.2s ease, translate 0s;
				}

				.kira-image-now img.zoom {
					cursor: grab;					
					scale: 3;
				}
			}
		}

		&.visible {
			pointer-events: auto;
			background-color: rgba(0, 0, 0, 0.6);
			backdrop-filter: blur(2px);

			.kira-image-container {
				div[class^='kira-image-'][class$='-button-panel'] .kira-image-exchange-button:hover {
					cursor: pointer;
					background-color: rgba(75, 75, 75, 0.4);
				}

				.kira-image-list {
					div > img {
						pointer-events: auto;
					}
				}
			}
		}

		&:not(.visible) * {
			opacity: 0;
			pointer-events: none;
		}
	}
}

@keyframes kira-image-to-next {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100vw);
	}
}

@keyframes kira-image-to-prev {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100vw);
	}
}
